import PropTypes from 'prop-types';
import React from 'react';
import { CONTENT_IDX_LABEL_MAP } from '../../../../common/constants';
import s from './style.module.css';
import Tooltip from '@kuiper-components/tooltip';
import { EyeOutlined } from '@ant-design/icons';

function Content({ fieldClassName, taskSettings }) {
	const includeUrlDOM = () => {
		if (taskSettings?.collect.includeUrl?.length <= 0) {
			return (
				<>
					{taskSettings?.collect?.depth >= 0 && (
						<tr>
							<td className={fieldClassName}>监测深度:</td>
							<td>
								<span>{taskSettings.collect.depth}</span>层
							</td>
						</tr>
					)}
					<tr>
						<td className={fieldClassName}>监测最大URL数:</td>
						<td>
							<span>{taskSettings?.collect?.maxPage}</span>页
						</td>
					</tr>
				</>
			);
		}
	};
	const keywordsRender = words =>
		words.length > 4
			? `${words.slice(0, 3).join('、')}等${words.length}类`
			: words.join('、');
	const allWordsRender = words => words.join('、');
	return (
		<>
			<tr>
				<td className={fieldClassName}>监测内容:</td>
				<td>
					<table className={s.content}>
						<tbody>
							<tr>
								<td>敏感词：</td>
								<td>
									{keywordsRender(
										taskSettings?.collect?.systemKeywordTypes?.length
											? taskSettings.collect.systemKeywordTypes.map(
													x => CONTENT_IDX_LABEL_MAP.keyword[x]
											  )
											: Object.values(CONTENT_IDX_LABEL_MAP.keyword)
									)}
									{(taskSettings?.collect?.systemKeywordTypes?.length > 4 ||
										Object.values(CONTENT_IDX_LABEL_MAP.keyword).length >
											4) && (
										<Tooltip
											placement="top"
											overlay={
												<span className={s.tipSpan}>
													{allWordsRender(
														taskSettings?.collect?.systemKeywordTypes?.length
															? taskSettings.collect.systemKeywordTypes.map(
																	x => CONTENT_IDX_LABEL_MAP.keyword[x]
															  )
															: Object.values(CONTENT_IDX_LABEL_MAP.keyword)
													)}
												</span>
											}
											overlayClassName={s.helpTooltip}
										>
											<EyeOutlined
												style={{ fontSize: '16px', color: '#08c' }}
											/>
										</Tooltip>
									)}
								</td>
							</tr>
							<tr>
								<td>隐私信息：</td>
								<td>
									{keywordsRender(
										taskSettings?.collect?.privacyDisclosureTypes?.length
											? taskSettings.collect.privacyDisclosureTypes.map(
													x => CONTENT_IDX_LABEL_MAP.privacy_disclosure[x]
											  )
											: Object.values(CONTENT_IDX_LABEL_MAP.privacy_disclosure)
									)}
									{(taskSettings?.collect?.privacyDisclosureTypes?.length > 4 ||
										Object.values(CONTENT_IDX_LABEL_MAP.privacy_disclosure)
											.length > 4) && (
										<Tooltip
											placement="top"
											overlay={
												<span className={s.tipSpan}>
													{allWordsRender(
														taskSettings?.collect?.privacyDisclosureTypes
															?.length
															? taskSettings.collect.privacyDisclosureTypes.map(
																	x =>
																		CONTENT_IDX_LABEL_MAP.privacy_disclosure[x]
															  )
															: Object.values(
																	CONTENT_IDX_LABEL_MAP.privacy_disclosure
															  )
													)}
												</span>
											}
											overlayClassName={s.helpTooltip}
										>
											<EyeOutlined
												style={{ fontSize: '16px', color: '#08c' }}
											/>
										</Tooltip>
									)}
								</td>
							</tr>
						</tbody>
					</table>
				</td>
			</tr>
			{taskSettings?.collect.includeUrl?.length > 0 && (
				<tr>
					<td className={fieldClassName}>指定URL:</td>
					<td>
						{taskSettings?.collect.includeUrl?.[0]}
						{taskSettings?.collect.includeUrl?.length > 1 && (
							<>
								等{taskSettings?.collect.includeUrl?.length}条
								<Tooltip
									placement="top"
									overlay={
										<span className={s.tipSpan}>
											{taskSettings?.collect.includeUrl.map(item => (
												<p>{item}、</p>
											))}
											{/* {allWordsRender(taskSettings?.collect.includeUrl)} */}
										</span>
									}
									overlayClassName={s.helpTooltip}
								>
									<EyeOutlined style={{ fontSize: '16px', color: '#08c' }} />
								</Tooltip>
							</>
						)}
					</td>
				</tr>
			)}
			{includeUrlDOM()}
		</>
	);
}

Content.propTypes = {
	className: PropTypes.string,
	fieldClassName: PropTypes.string,
	taskSettings: PropTypes.object,
};

Content.defaultProps = {
	className: '',
};

export default Content;
